<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片相册</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="layer-v3.2.0/layer/layer.js"  type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
<!-- //调用相册 -->
<div id="post-content" class="layer-photos-demo">
  <img layer-pid="image1" layer-src="img/1.jpg" src="img/1.jpg" alt="飞云之下" title="飞云之下" height="250">
  <img layer-pid="image2" layer-src="img/2.jpg" src="img/2.jpg" alt="林俊杰" title="林俊杰" height="250">
  <img layer-pid="image3" layer-src="img/3.jpg" src="img/3.jpg" alt="aa" title="aa" height="250">
</div>
		
		<script>
			function previewImg(obj) {
		        var img = new Image();  
		        img.src = obj.src;
		        var imgHtml = "<img src='" + obj.src + "' />";  
		       	//弹出层
		        layer.open({  
		            type: 1,  
		            shade: true,  
		            title: false, //不显示标题  
		            area:['auto','auto'],
		            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
		            cancel: function () {  
		                
		            }  
		        }); 
		    };
			
				//图片预览事件
				  $("#post-content img").each(function() {
			        $(this).click(function() {
			        	previewImg(this);
			        })
			  		  });


		</script>
	</body>
</html>
